<template>
  <div>
    <UserSearch @add-user="addUser" v-model="search" @search="page = 1; queryUserList"></UserSearch>
    <!-- 引入表格 -->
    <Table border :columns="columns" :data="data" row-key="id">
      <template #action="{ row, index }">
        <Button v-auth:user:apply:role type="success" icon="md-walk" size="small" style="margin-right: 5px" @click="bindRole(row)">分配角色
        </Button>
        <Button v-auth:user:update type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px" @click="editUser(row)">
          修改
        </Button>
        <Button v-auth:user:delete type="error" icon="ios-remove-circle-outline"
                size="small" @click="remove(row, index)">注销
        </Button>

      </template>

      <template #roles="{ row, index }">
        <Tag color="default" v-for="(key, index) in row.roleNames.split(',')" :key="key">{{ key }}</Tag>
      </template>

      <template #locked="{ row, index }">
        <Tag color="error" v-if="!row.state">是</Tag>
        <Tag color="primary" v-else>否</Tag>
      </template>

      <template #footer>
        <div style="min-width: 300px; max-width: 380px;">
          <van-pagination v-model="page" :total-items="total" @page-click="queryUserList"
                  :items-per-page="rows" :show-page-size="5" force-ellipses/>
        </div>
      </template>
    </Table>

    <Drawer
        :title="drawer.title"
        v-model="drawer.state"
        width="720"
        :mask-closable="false"
        :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
      <UserForm ref="user" @close-win="closeWin" :user-id="drawer.userId" v-if="drawer.state"></UserForm>
    </Drawer>

    <BindRole v-model="bind.modalValue" :user-id="bind.userId" @bind-role-ok="queryUserList"
              v-if="bind.modalValue" />

  </div>
</template>
<script>
import UserForm from '../components/user/UserForm.vue'
import BindRole from '../components/user/BindRole.vue'
import UserSearch from '../components/user/UserSearch.vue'
import DotTag from '../components/DotTag.vue'
import VanPagination from '../components/VanPagination.vue'

export default {
  data() {
    return {
      drawer: {
        state: false,
        title: "",
        row: {} ,
        userId: null,
      },
      bind: {
        modalValue: false,
        userId: -1 ,
      },
      search: {}, // 要查询的数据
      page: 1,
      rows: 10 ,
      total: 0,
      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, {row}) => {  // render 函数中的 h 用来构建一个 虚拟 dom , 三个参数 （1. 要创建的标签名、 2. 标签的属性、 3. 子元素）
            return h('div', {class: 'user-details'}, [
              h('p', [
                h('label', ['所属机构:']),
                h('span', [row.organizations])
              ]),
              h('p', {}, [
                h('label', ['职务:']),
                h('span', [row.positions])
              ]),
              h('p', {}, [
                h('label', ['电子邮箱:']),
                h('span', [row.email])
              ]),
            ])
          }
        },
        {title: '用户名', key: 'username', tree: true},
        {title: '手机号', key: 'tel'},
        {title: '真实姓名', key: 'realName'},
        {title: '角色', slot: 'roles', width: 300},
        {title: '锁定', slot: 'locked'},
        {title: '录入时间', key: 'createTime'},
        {title: '操作', slot: 'action', width: 340, align: 'center'}
      ],
      data: [],
    }
  },
  created() {
     this.queryUserList();
  },
  methods: {
    queryUserList(){
       this.$api.queryUserList({page:this.page, rows: this.rows, ...this.search}).then(ret=> {
          this.data = ret.data.data.list ;
          this.total = ret.data.data.total ;
       })
    },
    addUser(){
      this.drawer.state = true ;
      this.drawer.title = "添加用户" ;
      this.drawer.userId = null ;
    },
    editUser(row) {
      this.drawer.state = true ;
      this.drawer.title = "修改用户" ;
      this.drawer.userId = row.id;
    },
    remove(row, index) {
      this.$tips.confirm("您确定要注销该用户吗?").then(()=> {
         this.$api.deleteUser(row.id).then(ret=> {
            if (ret.data.status) {
               this.$tips.success("注销成功");
               this.queryUserList();
            }
         })
      });
    },
    bindRole(row) {
      // 显示弹出层
      this.bind.modalValue = true;
      this.bind.userId = row.id ;
    },
    closeWin(status) {
      this.drawer.state = false;
      this.$refs.user.resetValidForm();
      this.queryUserList();
    }
  },
  components: {
    UserForm,
    BindRole,
    DotTag,
    VanPagination,
    UserSearch
  }
}
</script>


<style>
.user-details {
  position: relative;
}

.user-details p {
  height: 24px;
  line-height: 24px;
  clear: both;
}

.user-details label {
  font-weight: bold;
  float: left;
  text-align: right;
  margin: 0 8px 0 0;
}
</style>
